<template>
  <div style="max-width: 1200px;margin: 0 auto;padding: 20px;
  font-family: 'Microsoft Yahei'">
    <!-- 搜索卡片 -->
    <el-card style="height: 70px;margin: 5px;">
      <el-form :inline="true">
        <el-form-item label="题目搜索" style="width: 270px;">
          <el-input placeholder="请输入题目名称"
                    v-model="searchQuestion.content"
                    @keydown.enter="loadQuestion"></el-input>
        </el-form-item>
        <el-form-item label="题目类型" style="width: 270px;">
          <el-select placeholder="请选择题目类型"
                     v-model="searchQuestion.type"
                     @change="loadQuestion">
            <el-option label="所有题型" value=""></el-option>
            <el-option label="判断题" value="0"></el-option>
            <el-option label="单选题" value="1"></el-option>
            <el-option label="多选题" value="2"></el-option>
            <el-option label="主观题" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button>重置</el-button>
          <el-button type="primary" @click="loadQuestion">查询</el-button>
        </el-form-item>
        <el-button type="primary" style="float:right;">新增题目</el-button>
      </el-form>
    </el-card>

    <!-- 考试页列表   -->
    <el-card style="margin: 10px;">
      <el-table :data="questionArr">
        <el-table-column type="index" label="编号" width="60" align="center"></el-table-column>
        <el-table-column prop="content" label="题目名称" align="center"></el-table-column>
        <el-table-column prop="type" label="题目类型" align="center">
          <template #default="scope">
            <span :style="typeStyle[scope.row.type]">
      {{typeMap[scope.row.type]}}</span></template>
        </el-table-column>
        <el-table-column prop="score" label="题目分数" align="center"></el-table-column>
        <el-table-column prop="createdTime" label="创建时间" align="center"></el-table-column>
        <el-table-column prop="updatedTime" label="更新时间" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button type="primary" link>编辑</el-button>
            <el-button type="danger" link>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import qs from 'qs';
import axios from "axios";
import {ElMessage} from "element-plus";
//接收用户搜索的条件
const searchQuestion = ref({content:'',type:''});
//定义数组保存表格数据
const questionArr = ref([]);
//定义加载题目的方法
const loadQuestion = () => {
  let data = qs.stringify(searchQuestion.value);
  console.log(data);
  axios.get(BASE_URL+'/v1/question/select?'+data).then((res)=>{
    if (res.data.code == 200){
      questionArr.value = res.data.data;
      console.log(questionArr.value);
    }else {
      ElMessage.error(res.data.message)
    }
  })
};
//一进入页面就自动加载题目
onMounted(()=>{
  loadQuestion();
})
const typeMap = ref({
  0: '判断题',
  1: '单选题',
  2: '多选题',
  3: '主观题'
});
const typeStyle = ref({
  0: { color: '#ff7d00' },
  1: { color: '#00b42a' },
  2: { color: '#86909c' },
  3: { color: '#1890ff' }
});

</script>
<style scoped>
</style>
